"use client"

import {
   Frame,
   LifeBuoy,
   Map,
   MoreHorizontal,
   PieChart,
   Send,
} from "lucide-react"

import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
} from "~/registry/default/ui/dropdown-menu"
import {
   Sidebar,
   SidebarContent,
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuAction,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
} from "~/registry/default/ui/sidebar"

const projects = [
   {
      name: "Design Engineering",
      url: "#",
      icon: Frame,
   },
   {
      name: "Sales & Marketing",
      url: "#",
      icon: PieChart,
   },
   {
      name: "Travel",
      url: "#",
      icon: Map,
   },
   {
      name: "Support",
      url: "#",
      icon: LifeBuoy,
   },
   {
      name: "Feedback",
      url: "#",
      icon: Send,
   },
]

export default function AppSidebar() {
   return (
      <SidebarProvider>
         <Sidebar>
            <SidebarContent>
               <SidebarGroup>
                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
                  <SidebarGroupContent>
                     <SidebarMenu>
                        {projects.map((project, index) => (
                           <SidebarMenuItem key={project.name}>
                              <SidebarMenuButton
                                 asChild
                                 className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
                              >
                                 <a href={project.url}>
                                    <project.icon />
                                    <span>{project.name}</span>
                                 </a>
                              </SidebarMenuButton>
                              <DropdownMenu>
                                 <DropdownMenuTrigger asChild>
                                    <SidebarMenuAction>
                                       <MoreHorizontal />
                                       <span className="sr-only">More</span>
                                    </SidebarMenuAction>
                                 </DropdownMenuTrigger>
                                 <DropdownMenuContent
                                    side="right"
                                    align="start"
                                 >
                                    <DropdownMenuItem>
                                       <span>Edit Project</span>
                                    </DropdownMenuItem>
                                    <DropdownMenuItem>
                                       <span>Delete Project</span>
                                    </DropdownMenuItem>
                                 </DropdownMenuContent>
                              </DropdownMenu>
                           </SidebarMenuItem>
                        ))}
                     </SidebarMenu>
                  </SidebarGroupContent>
               </SidebarGroup>
            </SidebarContent>
         </Sidebar>
      </SidebarProvider>
   )
}
